<template>
	<view class="body" v-if="order">
		<image src="../../static/image/04.png" mode="widthFix" class="bg"></image>
		<u-navbar
		title="下单支付"
		:autoBack="true"
		:background="{
		background:'transparent'
		}"
		:border-bottom="false"
		titleSize="28rpx" titleColor="#fff"
		back-icon-color="#fff"
		:isFixed="false"
		/>
		<view class="content">
			<image src="../../static/image/05.png" mode="widthFix" class="img"></image>
			
			<view class="box">
				<view class="f30 c3 bold mb20">
					当前助力人数：{{order.orderZl.length}}人
				</view>
				<scroll-view scroll-x="true" class="scroll">
					<view class="item t-flex colum " v-for="item in order.orderZl" :key="item.id">
						<uv-image :src="$str.avatar(item.avatar)" mode="aspectFill"
						width="90rpx"
						height="90rpx"
						radius="50%"
						></uv-image>
						<view class="mt20 f26 c6">
							{{item.nickname}}
						</view>
					</view>
				</scroll-view>
			</view>
			
			<view class="box2">
				<view class="t-flex center cf f32 bold">
					最多{{config?.max_user_count || 0}}人助力
				</view>
				 <view class=" mt10 cf t-flex center">剩余助力时间：{{extime}}</view>
				<view class="t-flex between f26 cf mt10">
					<view class="">
						优惠金额：￥{{JSON.parse(order.orderInfo.shippingfee).zl_price}}
					</view>
					<view class="">
						支付金额：￥{{order.orderInfo.payamount}}
					</view>
				</view>
			</view>
			
		</view>
		
		<view class="bottom t-flex center safeArea bgf" v-if="store.userinfo?.id == order.orderInfo.user_id">
			<label class="btn t-flex center f30 mainC btn1 mr30" for="share">
				邀请好友助力
				<button open-type="share" style="display: none;" id="share"></button>
			</label>
			<view class="btn cf t-flex center f30 mainBC" @click="pay">
				立即支付¥{{order.orderInfo.payamount}}
			</view>
		</view>
		<view class="bottom t-flex center safeArea bgf" v-else>
			<needLogin @onClick="help">
				<view class="btn cf t-flex center f30 mainBC">
					为他助力
				</view>
			</needLogin>
		</view>
	</view>
	
	<loading v-else></loading>
	
</template>

<script setup lang="ts">
	import { onLoad,onShow,onShareAppMessage,onShareTimeline,onUnload } from "@dcloudio/uni-app"
	import { ref,computed } from "vue";
	import { orderDetail, orderZl, osZl, payOrder } from "../../api";
	import { useStore } from "../../store";
	import { showToast, strFn } from "../../lib/ts/util";
	
	
	const store = useStore()
	
	
	onLoad(options=>{
		getOrder(options.id)
	})
	onShow(()=>{
		if(order.value){
			getOrder(order.value.orderInfo.id)
		}
	})
	onShareAppMessage(()=>{
		let {sf_pid,xy_pid} = getscene()
		return {
			title:`${store.userinfo.nickname}邀您一起助力`,
			imageUrl:strFn.img(order.value.orderInfo.good_image),
			path:`/pages/shareOrder/shareOrder?id=${order.value.orderInfo.id}&sf_pid=${sf_pid}&xy_pid=${xy_pid}`
		}
	})
	onShareTimeline(()=>{
		let {sf_pid,xy_pid} = getscene()
		return {
			title:`${store.userinfo.nickname}邀您一起助力`,
			imageUrl:strFn.img(order.value.orderInfo.good_image),
			query:`id=${order.value.orderInfo.id}&sf_pid=${sf_pid}&xy_pid=${xy_pid}`
		}
	})
	onUnload(()=>{
		clearInterval(timer)
	})
	
	
	
	const getscene = ()=>{
		let sf_pid = 0
		let xy_pid = 0
		if(store.userinfo){
			sf_pid = store.userinfo.is_sf==1?store.userinfo.id:0
			xy_pid = store.userinfo.is_sf==1?0:store.userinfo.id
		}	
		return {
			sf_pid,
			xy_pid
		}
	}
	
	
	//订单信息
	let order = ref()
	const getOrder = async (id:number)=>{
		order.value = await orderDetail(id)
		inittimer()
		getConfig()
	}
	
	//助力配置
	let config = ref()
	const getConfig = async ()=>{
		let res = await osZl()
		config.value = res.find(item=> order.value.orderInfo.type == item.type) 
		if(!config.value.is_show_switch){
			uni.showModal({
				title:'提示',
				content:'助力活动已结束。',
				success(e) {
					uni.navigateBack()
				}
			})
		}
	}
	
	
	const pay = async ()=>{
		let paydata = await payOrder(order.value.orderInfo.id)
		store.pay(paydata,'wechat').then(()=>{
			uni.redirectTo({
				url:'/pages/public/paySuccess?id='+order.value.orderInfo.id
			})
		}).catch(()=>{
			uni.redirectTo({
				url:'/pages/order/detail?id='+order.value.orderInfo.id
			})
		})
	}
	
	
	const help =  async ()=>{
		let res = await orderZl({
			order_id:order.value.orderInfo.id,
			user_id:store.userinfo.id
		})
		showToast(res.msg)
	}
	
	let nowdate = ref(0)
	let timer = null
	const inittimer = ()=>{
		nowdate.value = Math.floor(+new Date()/1000)
		if(nowdate.value>=order.value.orderInfo.zlexpiretime) return
		clearInterval(timer)
		timer = setInterval(()=>{
			nowdate.value ++
		},1000)
	}
	let extime = computed(()=>{
		let expiretime = order.value.orderInfo.zlexpiretime
		let count = expiretime-nowdate.value
		if(count<=0){
			clearInterval(timer)
			return ''
		}else{
			let s = count%60
			let m = Math.floor(count/60%60)
			let h = Math.floor(count/60/60%60)
			return `${(h+'').padStart(2,'0')}:${(m+'').padStart(2,'0')}:${(s+'').padStart(2,'0')}`
		}
	})
	

</script>

<style scoped lang="scss">
	.body{
		min-height: 100vh;
		background-color: #FDD2BD;
	}
	.bg{
		position: absolute;
		width: 100%;
	}
	
	.content{
		position: relative;
		z-index: 2;
		margin-top: 100rpx;
		.img{
			width: 750rpx;
		}
		.box{
			position: absolute;
			width: 65%;
			left: 0;
			right: 0;
			top: 36rpx;
			margin: auto;
			.scroll{
				white-space: nowrap;
				.item{
					display: inline-flex;
					
					margin-right: 15rpx;
				}
			}
		}
		.box2{
			position: absolute;
			width: 80%;
			left: 0;
			right: 0;
			bottom: 52rpx;
			margin: auto;
		}
	}
	
	.bottom{
		position: fixed;
		height: 120rpx;
		bottom: 0;
		width: 100%;
		left: 0;
		.btn{
			width: 330rpx;
			height: 80rpx;
			border-radius: 40rpx;
		}
		.btn1{
			background-color: $main-color-opcity1;
		}
	}
	
	
</style>
